<template>
  <section>
    <el-form label-width="100px">
      <el-form-item label="分享内容类型">
        <div v-if="share.contentType !== ''">
          <sel-content-type :item="share" type="share"></sel-content-type>
        </div>
        <!--<el-row v-if="share.contentType !== ''">{{share.contentType}}-{{share.contentValue}}(临时显示，观测变化)</el-row>-->
        <el-row v-else>
          <el-col :span="10">
            <sel-content-type :item="share" type="share"></sel-content-type>
          </el-col>
          <el-col :span="10">
            <el-button size="mini" type="text" @click="showSelVal = !showSelVal">选内容</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="share.contentType && showSelVal" label="选择具体内容">
        <el-row><el-button size="mini" type="text" @click="show = !show">{{show?'<<< '+'收起' :'展开'+' >>>'}}</el-button></el-row>
        <el-row v-if="show">
          <sel-content-val :item="share" :departmentId="department"></sel-content-val>
        </el-row>
      </el-form-item>
      <el-form-item label="统计类型">
        <el-select size="mini" v-model="share.computeType">
          <el-option v-for="(ct,index) in computeTypeList" :key="index" :value="ct.val" :label="ct.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分享者">
        <el-select clearable v-model="share.memberId" :filterable="true" remote clearable
                   :reserve-keyword="false" default-first-option  placeholder="请输入姓名"
                   :remote-method="remoteMethod" size="mini">
          <el-option v-for="user in memberList" :key="user.id" :label="user.userName" :value="user.id">
            <span style="float: left">{{ user.userName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ user.phone }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户端">
        <el-select size="mini" v-model="share.cId">
          <el-option v-for="client in clientList" :key="client.id" :value="client.id" :label="client.clientName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分享图片">
        <el-row>
          <el-col :span="12">
            <upload-img v-on:get="getImgUrl"></upload-img>
            <el-input size="mini" v-model="share.img" style="width: 90%"></el-input>
          </el-col>
          <el-col :span="12" v-if="share.img !== ''">
            <img :src="share.img" width="60%"/>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="saveBtn">保存</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import selContentVal from '@/common/selContentVal'
  import selContentType from '@/common/selContentType'
  import uploadImg from  '@/common/uploadImg'
  import errHandler from '@/assets/errHandler'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "newShare",
    props:['share','department'],
    components:{uploadImg,selContentType,selContentVal},
    data() {
      return {
        memberList:null,
        clientList:null,
        computeTypeList:[
          {name:'系统',code:'system',val:1},
          {name:'营销',code:'marketing',val:2},
          {name:'用户',code:'member',val:3},
        ],
        list:null,
        totalPage:0,
        show:false,
        showSelVal:false
      }
    },
    created(){
      console.log('看下要分享的-----',this.share)
      this.getClientList()
    },
    computed:{
    },
    watch: {
      share(nv,ov){
        console.log('为啥没动静？？？',nv)
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getImgUrl(e) {
        if(this.share.img === undefined){
          Vue.set(this.share,'img',e[0].url)
          return
        }
        this.share.img = e[0].url
      },
      getClientList(){
        this.fetch({name:"getClientList"})
          .then(res=>{
            console.log(res)
            this.clientList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      remoteMethod(keywords) {
        if(keywords === '' || !keywords){//关键词为空或没有输入
          this.memberList=[]
          return
        }
        this.fetch({name:"getMembers",data:{keywords}})
          .then(res=>{
            this.memberList=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      saveBtn(){
        console.log(this.share)
        this.fetch({name:"shareByAdmin",data:{...this.share}})
          .then(res=>{
            console.log('新建成功一个活动分享------',res)
            this.$emit('success',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
